<template>
	<view class="page">
		<NavBar>
			<block slot="left">
				<text class="iconfont icon-fanhui back"></text>
			</block>
			<block slot="title">沟通</block>
			<block slot="right">
				<text class="iconfont icon-sousuo search" @click="visible = true"></text>
			</block>
		</NavBar>
		<view class="body">
			<scroll-view scroll-y="true" :refresher-triggered="triggered" refresher-enabled="true"
				:refresher-threshold="80" refresher-background="#f1f1f1" @scrolltolower="onReachLower"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">
				<view class="card" v-for="item in groupList" :key="item.chatId" @click="toChat">
					<view class="face">
						<view class="budge"></view>
					</view>
					<view class="info">
						<view class="header">
							<view class="title">{{item.title}}</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="msg">
							<text v-if="item.unread" class="unread">[{{item.unread}}条]</text>
							{{item.title}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="th-dialog" :class="[visible?'show':'']" @touchmove.stop.prevent="moveHandle">
			<view class="search-panel">
				<view class="input">
					<text class="iconfont icon-sousuo1"></text>
					<input class="uni-input" placeholder="搜索" confirm-type="search" />
				</view>
				<text @click="visible = false">取消</text>
			</view>
			<view class="result">
				<view class="title">最近在搜</view>
				<view class="wrap">
					<view class="item" v-for="item in searchList" :key="item.chatId" @click="toChat">
						<view class="face"></view>
						<view class="info">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from './components/navBar.vue'
	export default {
		components:{
			NavBar
		},
		data() {
			return {
				visible:false,
				groupList: [{
					chatId: '1',
					title: '磷酸体力',
					time: '昨天',
					unread: 5
				}, {
					chatId: '2',
					title: '国防ETF'
				}, {
					chatId: '2',
					title: '国防ETF'
				}, {
					chatId: '2',
					title: '国防ETF'
				}, {
					chatId: '2',
					title: '国防ETF'
				}],
				searchList:[
				   {
					chatId: '2',
					title: '国防ETF'
				   },
				   {
					chatId: '2',
					title: '国防ETF'
				   },
				   {
					chatId: '2',
					title: '国防ETF'
				   },
				   {
					chatId: '2',
					title: '国防ETF'
				   }
				],
				_freshing:false,
				triggered:false,
				param:{
					page:1,
					size:50
				},
				haveMore:true
			}
		},
		methods: {
			moveHandle(){},
			toChat() {
				uni.navigateTo({
					url: '/pages/chat/index'
				})
			},
			getData(param){
				
				return new Promise((resolve)=>{
					setTimeout(() => {
						resolve(true)
						const res = {
							data:{
								list:[1,2,3]
							}
						}
						// 还有数据
						if(res.data.length < param.size){
							this.haveMore = false;
						}else{
							this.haveMore = true;
							this.param.page+=1;
						}
						
						this.groupList = [...this.groupList,...[res.data.list]]
					}, 1000)
				})
			},
			onReachLower() {
				if(!this.haveMore) return;
				console.log('底部');
			},
			resetParam(){
				this.param.page = 1;
				this.groupList = [];
				this.haveMore = true;
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true;
				// 请求数据
                this.resetParam();
				this.getData(this.param).then(()=>{
					this.triggered = false;
					this._freshing = false;
				})
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			}
		},
		onLoad() {
			this.getData(this.param);
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100vh;
		display: flex;
		font-size:32rpx;
		flex-direction: column;
	}
	.back{
		font-size:40rpx;
	}
	.search{
		font-size:40rpx;
		margin-right:15rpx;
	}

	.body {
		flex: 1;
		height:0;
		scroll-view{
			height:100%;
		}
	}

	.card {
		border-bottom: 1rpx solid #f1f1f1;
		padding: 20rpx;
		display: flex;
		align-items: center;
        background:#fff;
		.face {
			position: relative;
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			border: 1rpx solid #f1f1f1;
			margin-right: 20rpx;

			.budge {
				position: absolute;
				width: 15rpx;
				height: 15rpx;
				top: -7rpx;
				left: -7rpx;
				background: red;
				border-radius: 50%;
			}
		}

		.info {
			flex: 1;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 34rpx;
				}

				.time {
					font-size: 28rpx;
					color: #999;
				}
			}

			.msg {
				font-size: 30rpx;
				color: #999;
				margin-top: 5rpx;
				.unread {
					margin-right: 10rpx;
				}
			}
		}
	}
	.th-dialog{
		position:fixed;
		width:100vw;
		height:100vh;
		top:0;
		left:0;
		z-index:99999;
		transition:all .5s;
		transform: translateY(-100%);
		opacity:0;
		background:#fff;
		&.show{
			opacity:1;
			transform: translateY(0);
		}
		.search-panel{
			display: flex;
			align-items: center;
			background:#f1f1f1;
			padding: var(--status-bar-height) 20rpx 0 20rpx;
			.input{
				display: flex;
				align-items: center;
				background:#fff;
				padding:10rpx;
				margin-right:15rpx;
				border-radius:10rpx;
				flex:1;
				margin:15rpx;
				.uni-input{
					margin-left:15rpx;
				}
			}
		}
		.result{
			background: #fff;
			padding:20rpx;
			.title{
				padding:10rpx 0;
			}
			.wrap{
				border-top:1rpx solid #f1f1f1;
				border-bottom:1rpx solid #f1f1f1;
				max-height:500rpx;
				overflow-y: scroll;
				.item {
					display: flex;
					align-items: center;
				    background:#fff;
					.face {
						position: relative;
						width: 60rpx;
						height: 60rpx;
						border-radius: 10rpx;
						border: 1rpx solid #f1f1f1;
						margin-right: 20rpx;
					}
					.info{
						flex:1;
						height:100rpx;
						line-height:100rpx;
						border-bottom:1rpx solid #f1f1f1;
					}
					&:last-child{
						.info{
						   border: none;
						}
						
					}
				}
			}
			
		}
	}
</style>